
body{
    background: url(/assets/img/frontend/screen/u0.png);
}
main.content {
    width: 100%;
    top: 0;
    position: absolute;
    z-index: 10;
    bottom: 50px;
    padding: 15px;
  }
.above_1 {
    float: left;
    height: 105px;
    width: 32%;
}
.above_2 {
    position: relative;
    float: left;
    height: 105px;
    width: 36%;
    border-bottom: 1px rgba(0, 153, 204, 1) solid;
}
.above_3 {
    float: left;
    height: 105px;
    width: 32%;
}
h2{
    text-align: center;
    line-height: 62px;
}
h1{
    text-align: center;
    line-height: 62px;
}
.company_div{
    width: 32%;
    height: 86px;
    float: left;
    /*background: url(/assets/img/u8.png);*/
    /*background: url(/assets/img/u10.png);*/
}
.title_div{
    width: 35%;
    height: 86px;
    float: left;        
    background-color: #7d7db0;
    background: url(/assets/img/u3.png);
}
.time_div{
    width: 33%;
    height: 86px;
    float: left;
    background: url(/assets/img/u9.png);       
}
.middle{    /*中间部分*/
    /* border: 1px white solid; */
    height: 600px
}
.app_quality{   /*应用质量分数*/
    height: 295px;
}
#top {
    position: relative;
}
#u9 {
    position: absolute;
    left: 15px;
    bottom: 15px;
}
#u10 {
    position: absolute;
    left: 15px;
    bottom: 18px;
}
#u11 {
    position: absolute;
    right: 15px;
    bottom: 15px;
}
#u12 {
    position: absolute;
    right: 15px;
    bottom: 18px;
}
.average{
    position: relative;
    height: 50%;
    border: 3px rgba(0, 153, 204, 1) solid; /**TODO发版本的时候删除*/
    border-radius: 0px;
}
.averages{
    height: 50%;
    border-radius: 0px;
}
#u1 {
    position: absolute;
    left: 15px;
    top: 15px;
}
#u2 {
    position: absolute;
    left: 15px;
    top: 18px;
}
#u3 {
    position: absolute;
    left: 15px;
    top: 277px;
}
#u4 {
    position: absolute;
    left: 15px;
    top: 246px;
}
#u5 {
    position: absolute;
    right: 15px;
    top: 277px;
}
#u6 {
    position: absolute;
    right: 15px;
    top: 246px;
}
#u7 {
    position: absolute;
    right: 15px;
    top: 15px;
}
#u8 {
    position: absolute;
    right: 15px;
    top: 18px;
}
.text {
    margin-top: 7px;
    text-align: center;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style : normal;
    font-size : 28px;
    color : #fff;
    width: 100%;
    height: 50px;
}
.map {
    float: left;
    width: 33%;
    margin-top: 20px;
}
.circle { 
    float: left;
    width: 150px; 
    margin-left: 20%;
    height: 150px; 
    background: #fff; 
    border-radius: 75px; 
} 

.chart_1 {
    width: 140px; 
    height: 140px; 
    background: #1D3939; 
    border-radius: 70px; 
    margin: 5px 5px;
}
.chart_2 {
    width: 140px; 
    height: 140px; 
    background: #003366; 
    border-radius: 70px; 
    margin: 5px 5px;
}
.chart_3 {
    width: 140px; 
    height: 140px; 
    background: #336633; 
    border-radius: 70px; 
    margin: 5px 5px;
}
.text_1 {
    font-size: 72px;
    color: #fff;
    height: 93px;
    text-align: center;
    line-height: 107px;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
}
.text_b {
    font-size: 16px;
    color: #fff;
    text-align: center;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
}
#app {
    /* border:2px dashed skyblue; */
}
#app span {
    font-size: 28px;
    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
    font-style: normal;
    font-weight: 700;
    color :#fff;
}
.app {
    width: 100%;
    height: 125px;
    border-radius: 15px;
    border: 1px rgba(0, 153, 204, 1) solid;
}
.app_left {
    float: left;
    width: 20%;
    height: 100%;
}
.app_right {
    float: left;
    width: 80%;
    height: 100%;
    border: 1px red solid;
}
.u13 {
    margin-top: 13px;
}
.u13 span {
    margin-left: 20px;
}
.u14 {
    float: left;
    width: 20%;
    height: 69%;
}
.u14 li{
    position: relative;
    list-style: none;
    height: 50%;
    font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    color: #fff;
}
.u14 li img {
    display: block;
    margin-top: 5px;
    float: left;
}
.u15 {
    float: left;
}
.u16 {
    position: absolute;
    width: 100%;
    top: 10px;
    font-size: 14px;
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap;
}
#u17 {
    float: left;
    display: block;
    margin-top: 20px;
    margin-left: 20px;
}
.u18 {
    position: relative;
    height: 640px;
    border-top: 3px rgba(0, 153, 204, 1) solid;
    border-bottom: 3px rgba(0, 153, 204, 1) solid;
}
#u19 {
    position: absolute;
    top: -1px;
    left: -1px;
}
#u20 {
    position: absolute;
    top: -1px;
    right: -2px;
}
#u21 {
    position: absolute;
    bottom: -2px;
    left: -1px;
}
#u22 {
    position: absolute;
    bottom: -2px;
    right: -2px;
}
.u23 {
    width: 100%;
    height: 100%;
}
.u24 {
    float: left;
    width: 93%;
    height: 100%;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 28px;
    color: #fff;
    text-align: center;
    line-height: 102px;
    border-top: 1px rgba(0, 153, 204, 1) solid;
}
.u25 {
    position: relative;
    float: left;
    width: 7%;
    height: 100%;
}
#u26 {
    position: absolute;
    left: 19px;
    top: -4px;
    transform: rotate(158deg);
}
#trapezoid {
    margin-right: 5px;
    border-top: 91px solid #7C7CAF; 
    border-left: 34px solid transparent; 
    border-right: 34px solid transparent; 
    width: 100%;
}
.u27 {
    position: absolute;
    top: 16%;
    left: 39%;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-size: 48px;
    color: #00FFCC;
}
.u28 {
    position: relative;
    float: left;
    width: 7%;
    height: 100%;
}
.u29 {
    float: left;
    width: 93%;
    height: 100%;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 28px;
    text-align: center;
    color: #fff;
    line-height: 120px;
    border-top: 1px rgba(0, 153, 204, 1) solid;
}
#u30 {
    position: absolute;
    left: 19px;
    top: -5px;
    transform: rotate(202deg);
}
.u31 {
    position: relative;
    width: 100%;
    height: 50px;
    font-size: 28px;
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    border-left: 3px rgba(0, 153, 204, 1) solid;
    border-right: 3px rgba(0, 153, 204, 1) solid;
}
.u32 {
    position: relative;
    border-left: 3px rgba(0, 153, 204, 1) solid;
}
.u33 {
    position: relative;
    border-right: 3px rgba(0, 153, 204, 1) solid;
}
#u34 {
    position: absolute;
    left: -1px;
    top: -1px;
}
#u35 {
    position: absolute;
    right: -2px;
    top: -1px;
}
#u36 {
    position: absolute;
    left: -1px;
    bottom: -2px;
}
#u37 {
    position: absolute;
    right: -2px;
    bottom: -2px;
}